<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Module day14 -->
		<title>day14 select stu</title>
		<link href="../CSS/button_Submit_Reset.css" rel="stylesheet" />
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>		
		
			// 表单数据拼接显示
			function showData(data){
				var str="";
				$("#9_tab").html("<tr>"+
					"<th>id</th>"+
					"<th>name</th>"+
					"<th>age</th>"+
					"<th>gender</th>"+
					"<th>favorite</th>"+
					"<th>eduBakground</th>"+
					"<th>admissionDate</th>"+
				"</tr>"+
				"<tr>"+
					"<th>id</th>"+
					"<th>姓名</th>"+
					"<th>年龄</th>"+
					"<th>性别</th>"+
					"<th>爱好</th>"+
					"<th>学历</th>"+
					"<th>入学日期</th>"+
				"</tr>");
				
				
				for (var i = 0; i < data.length; i++) {
					resolveStu(data[i]);
					str="<tr align='center'><td>"
					+data[i].id+"</td><td>"
					+data[i].name+"</td><td>"
					+data[i].age+"</td><td>"
					+data[i].sex+"</td><td>"
					+data[i].like+"</td><td>"
					+data[i].eduBackground+"</td><td>"
					+data[i].admissionDate+"</td></tr>";
					
					$("#9_tab").append(str);
				}
			}
			// 解析student对象 
			function resolveStu(stu){
				if(stu.sex==0){
					stu.sex='女';
				}else if (stu.sex==1){
					stu.sex='男';
				}
				if(stu.like==1){
					stu.like='乒乓球';
				}else if(stu.like==2){
					stu.like='篮球';
				}else if(stu.like==3){
					stu.like='足球';
				}
				
				if(stu.eduBackground==1){
					stu.eduBackground='小学';
				}else if(stu.eduBackground==2){
					stu.eduBackground='初中';
				}else if(stu.eduBackground==3){
					stu.eduBackground='高中';
				}else if(stu.eduBackground==4){
					stu.eduBackground='专科';
				}else if(stu.eduBackground==5){
					stu.eduBackground='本科';
				}else if(stu.eduBackground==6){
					stu.eduBackground='硕士';
				}else if(stu.eduBackground==7){
					stu.eduBackground='博士';
				}
				
				
			}
			
			function n_fnse(){
				$.ajax({
					url:"http://localhost:8080/stu/select",
					data:$("#9_formSe").serialize(),
					
					success:function(data){
						$("#9_h5_1").text(JSON.stringify(data));
						showData(data);
						console.log("select success");
					},
					error:function(data){
						$("#9_h5_1").text(JSON.stringify(data));
						console.log("select success");
					}
					
					
				})
			}
			
		</script>
	</head>
	<body>
		<h5 id="9_h5_1">9_h5_1 显示select是否成功</h5>
		<div>

			<form action="#" id="9_formSe" method="post">
				<table>
					<tr>
						<td>
							按id查找:
						</td>
						<td>
							<input type="text" name="id" />
							<input type="button" name="提交" value="提交" class="buttonSubmit"onclick="n_fnse();" />
						</td>
					</tr>
					

				</table>

			</form>
		</div>
		<div>
			<table>
				<tr>
					<td colspan="2">
						或者：&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="button" name="show" value="显示所有信息" class="buttonSubmit" style="width: 100px;" />
					</td>
				</tr>
			</table>
		</div>
		<div>
			<table border="1" cellpadding="5px" cellspacing="0" bordercolor="white" bgcolor="#FFE4C4" id="9_tab">
				<!-- /*
            * id int PRIMARY KEY auto_increment ,
            * name varchar(100),
              age tinyint,
              gender int not null DEFAULT 0,
              favorite int,
              eduBackground int,
              admissionDate date,*/ -->
				<tr>
					<th>id</th>
					<th>name</th>
					<th>age</th>
					<th>gender</th>
					<th>favorite</th>
					<th>eduBakground</th>
					<th>admissionDate</th>
				</tr>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>学历</th>
					<th>入学日期</th>
				</tr>

				<!-- <tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr> -->




			</table>


		</div>


	</body>
</html>
